<script>
  export default {
    data() {
      return {
        todos: [
          {
            id: 11,
            title: '事项1',
            completed: true,
            editing: false
          },
          {
            id: 22,
            title: '事项2',
            completed: false,
            editing: false
          },
          {
            id: 33,
            title: '事项33',
            completed: false,
            editing: false
          }
        ],
        visibility: 'all', //默认是all的状态。
        inputV:'',
        footerShow: false, //默认页脚应隐藏，并在有待办事项时显示
        leftItem: 'items',
        isEditing: false
      }
    },
    mounted() {
      // 监控hash值是否变化：
      // 当URL的片段标识符更改时，将触发hashchange事件，然后调用自定义函数处理。
      window.addEventListener('hashchange', this.hashChangeDeal);
      this.hashChangeDeal()
    },

    methods: {
      toggleAll(event) {//实现点击之后全部是完成/取消状态。
        // console.log("type:"+ event.type) //click
        // console.log(event.target) //触发元素：<input id=...class="toggle-all">
        // console.log("checked："+ event.target.checked) //checkbox的选中状态
          //对数组的每一项进行操作。遍历数组，进行操作
        this.todos.forEach(todo => {
          todo.completed = event.target.checked;
        });
      },
      hashChangeDeal(){ // hash值变化了：
        // 获取url的hash值。当前的可见性用visibility（全局存作为属性，因为要用它。）
        const ahash = window.location.hash; // 将#/替换为空 
        // console.log('ahash:'+ ahash) // 是#/completed
        this.visibility = ahash.replace(/#\/?/,'');
        // console.log('mounted的visibility:'+ this.visibility) // 是completed
      },
      addItem(e) {
        // console.log(e.target) // <input placeholder="What...>
        console.log(e.target.value) // 获取 input 输入框内容
        //注意要去除前后空格，并且为空时不算。
        //新增
        const title1= e.target.value.trim();
        if(!title1){
          return
        }
        let todo = {id: Date.now(), title:title1, completed: false, editing: false}
        // console.log(todo) // {id: 1714469430306, title: '111111', completed: false}
        // this.todos.push(todo) //向数组的末尾添加一个
        this.todos.unshift(todo) //向数组的开头添加。也可直接用大括号添加对象。
        //回车后，清除输入框内容。
        e.target.value=''
        // console.log(this.todos)
      },
      editItem(todo){ //实现回车后保存，不可编辑
        //保存到数组里
        //v-model 已经实时修改了。只需改变状态。
        console.log(todo.title) 
        todo.editing=false
        // console.log(this.todos)

      },
      editText(todo) {//实现双击后可编辑
        //  console.log('editText') 
        //  console.log(todo.title) 
         todo.editing=true
      },
      deleteItem(todo) {
        //使用splice()方法 删除指定元素，需要查找下标。
        //下标用indexOf
        let idx = this.todos.indexOf(todo)
        this.todos.splice(idx, 1) // 从下标为idx的位置开始，删除1个元素。
        // console.log(idx) 
        // console.log(this.todos) //splice直接改变原始数组。
      },
      clearCompleted() {
        // 清除已经完成的。
        this.todos = this.todos.filter( todo => !todo.completed)
      }
    
    },
    computed:{
      //利用visibility进行最终这个todos的筛选啊
      filterTodos(){
        switch (this.visibility) {
          case 'all':
            return this.todos
          case 'active':
            return this.todos.filter( todo => !todo.completed)
          case 'completed':
            return this.todos.filter( todo => todo.completed)
          // default:
          //   this.visibility = 'all'
          //   return this.todos
        }
      },
      itemsLeft(){
        return this.todos.filter(todo => !todo.completed).length
      },
      footerIsShow(){
        //默认页脚应隐藏，并在有待办事项时显示
        // len =0，不展示。
        if(this.todos.length == 0){
          this.footerShow = false
        }else {
          this.footerShow = true
        }
        return this.footerShow
      },

      leftItems(){
        // if(this.todos.filter(todo => !todo.completed).length <= 1){
        if(this.todos.filter(todo => !todo.completed).length == 1){
          this.leftItem = 'item'
        }else {
          this.leftItem = 'items'
        }
        return this.leftItem


      }
    },
  }
</script>

<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input class="new-todo" @keyup.enter="addItem" placeholder="What needs to be done?" autofocus>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input @click="toggleAll"
      id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <!-- These are here just to show the structure of the list items List items should get the class `editing` when editing and `completed` when marked as completed -->
          <!-- 这些只是为了显示列表项的结构列表项在编辑时应获得类“editing”，在标记为已完成时应获得“completed” ,所以应该是个属性,不然全部可编辑应该不对-->
          <li 
          v-for="todo in filterTodos" 
          :key="todo.id"
          :class="{completed: todo.completed, editing:todo.editing}">
            <div class="view">
              <input class="toggle" type="checkbox" 
              v-model="todo.completed">
              <label @dblclick="editText(todo)" >{{todo.title}} </label>
              <button class="destroy" @click="deleteItem(todo)"></button>
            </div>
            <input :class="{edit:todo.editing}" v-model="todo.title" @keyup.enter="editItem(todo)" v-show="todo.editing">
            <!-- <input @dblclick="editText" :class="{edit:isEditing}"  v-show="isEditing" value="Create a TodoMVC template"> -->
            
          </li>
        <!-- <li>
          <div class="view">
            <input class="toggle" type="checkbox">
            <label>Buy a unicorn</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Rule the web">
        </li> -->
      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer :class="{footer: footerIsShow}" v-show="footerIsShow">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{ itemsLeft }}</strong> {{leftItems}} left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{selected: visibility =='all'}"  href="#/all">All</a>
        </li>
        <li>
          <a :class="{selected: visibility =='active'}"  href="#/active">Active</a>
        </li>
        <li>
          <a :class="{selected: visibility =='completed'}"  href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearCompleted">Clear completed</button>
    </footer>
  </section>
</template>

<!-- 这是一个在线的CSS链接 -->
<style>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css";
/* 同时把 index.css 下载到ling-todos\src\assets\index.css这里了，可以引入 */
</style>
